<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">{{title}}</div>
        <div class="text item main">
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item label="学科：" prop="subjectID">
              <el-select
                v-model="form.subjectID"
                placeholder="请选择"
                style="width: 400px"
                @change="allList"
              >
                <el-option
                  v-for="item in subject"
                  :key="item.label + item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="目录：" prop="catalogID">
              <el-select
                v-model="form.catalogID"
                placeholder="请选择"
                style="width: 400px"
              >
                <el-option
                  v-for="item in catalogue"
                  :key="item.label + item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业：" prop="enterpriseID">
              <el-select
                v-model="form.enterpriseID"
                placeholder="请选择"
                style="width: 400px"
              >
                <el-option
                  v-for="item in company"
                  :key="item.id"
                  :label="item.shortName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市：" prop="city">
              <el-select
                v-model="form.province"
                placeholder="请选择"
                style="width: 198px"
                @change="getCounty"
              >
                <el-option
                  v-for="item in district.province"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <!-- 地区 -->
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 198px"
              >
                <el-option
                  v-for="item in district.citys"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向：" prop="direction">
              <el-select
                v-model="form.direction"
                placeholder="请选择"
                style="width: 400px"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题型：">
              <el-radio
                v-model="form.questionType"
                v-for="item in question"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-form-item>
            <el-form-item label="难度：">
              <el-radio
                v-model="form.difficulty"
                v-for="item in difficulty"
                :key="item.value"
                :label="item.value"
                :value="item.value"
                >{{ item.label }}</el-radio
              >
            </el-form-item>
            <el-form-item label="题干：" prop="question">
              <quill-editor
                v-model="form.question"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur"
              ></quill-editor>
            </el-form-item>
            <el-form-item label="选项：" v-if="form.questionType !== '3'">
              <!-- 单选框 -->
              <div v-if="form.questionType === '1'">
                <div
                  class="options"
                  v-for="(domain, index) in form.options"
                  :key="domain.key"
                >
                  <el-radio
                    v-model="domain.isRight"
                    :label="true"
                    @change="putOptions(domain)"
                    style="margin-right: 0px"
                    >{{ Englishs[index] }}：</el-radio
                  >
                  <el-input
                    v-model="domain.title"
                    style="width: 240px"
                  ></el-input>
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :http-request="(file)=>httpRequest(file,domain)"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                  >
                    <img v-if="domain.img" :src="domain.img" class="avatar" />
                    上传图片
                    <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
                    <i class="el-icon-circle-close" @click="delPicture(domain)"></i>
                  </el-upload>
                </div>
              </div>
              <!-- 多选框 -->
              <div v-if="form.questionType === '2'">
                <div
                  class="options"
                  v-for="(domain, index) in form.options"
                  :key="domain.key"
                >
                  <el-checkbox
                    v-model="domain.isRight"
                    :label="true"
                    style="margin-right: 0px"
                    >{{ Englishs[index] }}：</el-checkbox
                  >
                  <el-input
                    v-model="domain.title"
                    style="width: 240px"
                  ></el-input>
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :http-request="(file)=>httpRequest(file,domain)"
                    :before-upload="beforeAvatarUpload"
                    :show-file-list="false"
                  >
                    <img v-if="domain.img" :src="domain.img" class="avatar" />
                    上传图片
                    <i class="el-icon-circle-close" @click="delPicture(domain)"></i>
                  </el-upload>
                </div>
              </div>
              <el-button
                type="danger"
                style="font-size: 12px"
                :disabled="form.questionType === '1'"
                @click="addDomain"
                >+增加选项与答案</el-button
              >
            </el-form-item>
            <el-form-item label="解析视频：">
              <el-input style="width: 400px" v-model="form.videoURL"></el-input>
            </el-form-item>
            <el-form-item label="答案解析：" prop="answer">
              <quill-editor
                v-model="form.answer"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="toEditorBlur"
              ></quill-editor>
            </el-form-item>
            <el-form-item label="题目备注：">
              <el-input
                v-model="form.remarks"
                style="width: 400px"
                type="textarea"
                :rows="4"
                placeholder="请输入内容"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="试题标签：">
              <el-select
                v-model="form.tags"
                placeholder="请选择"
                style="width: 400px"
                multiple
              >
                <el-option
                  v-for="item in labels"
                  :key="item.label + item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="font-size: 14px"
                v-if="control"
                @click="addAmend"
                >确认提交</el-button
              >
              <el-button
              type="success"
              style="font-size: 14px"
              v-if="!control"
              @click="addAmend"
                >确认修改</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
// 副本编辑器接口
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 城市县区接口
import { provinces, citys } from '@/api/hmmm/citys.js'
// 企业管理接口
import { list } from '@/api/hmmm/companys'
// 难度,题型,方向的接口
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
// 学科接口
import { simple } from '@/api/hmmm/subjects'
// 目录接口
import { simple as simplesDirectorys } from '@/api/hmmm/directorys'
// 标签接口
import { simple as simpleTags } from '@/api/hmmm/tags'
// 基础题库接口
import { add, detail, update } from '@/api/hmmm/questions'
// 腾讯云接口
import cos from '@/utils/cos'
export default {
  name: 'QuestionsNew',
  components: {
    quillEditor
  },
  data () {
    return {
      // 控制按钮显示与隐藏
      control: true,
      // 表头名称
      title: '',
      // 用来接收传过来的id
      id: '',
      // 地区
      district: {
        province: [],
        citys: []
      },
      // 学科
      subject: [],
      // 目录
      catalogue: [],
      // 标签
      labels: [],
      // 企业
      company: [],
      // 方向
      direction: [],
      // 题型
      question: [],
      // 难度
      difficulty: [],
      // 单选多选框
      frame: true,
      // 整体的表单
      form: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 城市
        city: '', // 地区
        direction: '', // 方向
        questionType: '1', // 题型
        difficulty: '1', // 难度
        question: '', // 题干
        // 选项
        options: [
          {
            // 是否选中
            isRight: false,
            // 选项名
            code: 'A',
            // 输入框内容
            title: '',
            // 图片
            img: ''
          },
          {
            isRight: false,
            code: 'B',
            title: '',
            img: ''
          },
          {
            isRight: false,
            code: 'C',
            title: '',
            img: ''
          },
          {
            isRight: false,
            code: 'D',
            title: '',
            img: ''
          }
        ],
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 试题标签
      },
      // 校验
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ]
      },
      // 副本编辑器中显示的工具和输入框里的默认值
      editorOption: {
        // 输入框里默认值为空
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image'], // 上传图片 添加链接
            ['link'] // 清除字体样式
          ]
        }
      },
      // 英文
      Englishs: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  },
  // 在页面刚开始的时候加载的数据
  created () {
    // 获取市
    this.getProvince()
    // 获取企业列表
    this.getCompany()
    // 获取方向 题型 难度
    this.getDirection()
    // 获取学科列表
    this.getSubject()
    // 数据回显
    this.getDetail()
  },
  methods: {
    // 题干的校验
    onEditorBlur () {
      this.$refs.form.validateField('question')
    },
    // 答案解析的校验
    toEditorBlur () {
      this.$refs.form.validateField('answer')
    },
    // 获取市
    getProvince () {
      this.district.province = provinces()
    },
    // 获取市下面的县
    getCounty (e) {
      // e是当前选中的市
      this.district.citys = citys(e)
      // 默认值选中市下面的第一个县
      this.form.city = this.district.citys[0]
    },
    // 获取企业列表
    async getCompany () {
      const { data } = await list({ pagesize: 10000 })
      this.company = data.items
    },
    // 获取学科列表
    async getSubject () {
      const { data } = await simple()
      this.subject = data
    },
    // 获取目录列表
    async getCatalog () {
      // 获取简单目录列表数据 传入学科的id拿到对应的值
      const { data } = await simplesDirectorys({
        subjectID: this.form.subjectID
      })
      // 拿到对应的值
      this.catalogue = data
      // 学科一变目录就清空
      this.form.catalogID = ''
    },
    // 获取标签列表
    async getLabel () {
      // 获取简单标签列表数据 传入学科的id拿到对应的值
      const { data } = await simpleTags({ subjectID: this.form.subjectID })
      // 拿到对应的值
      this.labels = data
      // 学科一变标签就清空
      this.form.tags = ''
    },
    // 目录列表和标签列表
    allList () {
      this.getCatalog()
      this.getLabel()
    },
    // 获取方向 题型 难度
    getDirection () {
      this.direction = direction
      this.question = questionType
      this.difficulty = difficulty
    },
    // 多选按钮的循环
    addDomain () {
      const long = this.form.options.length
      this.form.options.push({
        isRight: false,
        code: this.Englishs[long],
        title: '',
        img: ''
      })
    },
    // 添加和修改基础题库
    addAmend () {
      // 表单的兜底校验
      this.$refs.form.validate(async (valid) => {
        // 校验不通过直接终止
        if (!valid) return
        // 判断有没有id 有id就是修改
        if (this.form.id) {
          // 如果为空的话转换不了东西就会报错 我们判断一下有没有值 有值就进行转换
          if (this.form.tags) {
            // 把数组的数据转为字符串传进去
            this.form.tags = this.form.tags.join(',')
          }
          // 调用接口 传入参数 id在数据回显的时候就拿到了
          await update(this.form)
          // 修改成功提示的弹窗
          this.$message.success('修改成功!')
        } else {
        // 如果为空的话转换不了东西就会报错 我们判断一下有没有值 有值就进行转换
          if (this.form.tags) {
            // 把数组的数据转为字符串传进去
            this.form.tags = this.form.tags.join(',')
          }
          // 调用接口 传入参数 添加基础题库
          await add(this.form)
          // 修改成功提示的弹窗
          this.$message.success('添加成功!')
        }
        // 路由调转
        this.$router.push('/questions/list')
      })
    },
    // 选项中的单选按钮
    putOptions (domain) {
      this.form.options.forEach((item) => {
        item.isRight = false
      })
      domain.isRight = true
    },
    // 添加图片的校验
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 把图片存入到腾讯云
    httpRequest ({ file }, domain) {
      if (!file) return
      cos.putObject({
        Bucket: 'hrsass-152-1316190666', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-beijing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: +new Date() + file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: function (progressData) {
          // console.log(JSON.stringify(progressData))
        }
      }, function (err, data) {
        // console.log(err || data)
        if (err) {
          this.$message.success('图片上传失败，请稍后再试')
          return
        }
        domain.img = '//' + data.Location
      })
    },
    // 删除图片
    delPicture (domain) {
      domain.img = ''
    },
    // 数据回显
    async getDetail () {
      // 获取路由里传过来的id
      this.id = this.$route.query.id
      // 判断有没有id 有id就是true 是修改
      if (this.id) {
        // 修改标题
        this.title = '试题修改'
        // 调用接口 id传入进去
        const { data } = await detail({ id: this.id })
        // 调用目录列表 传入学科的id 来获取当前的列表
        this.getCatalogs(data.subjectID)
        // 调用标签列表 传入学科的id 来获取当前的列表
        this.getLabels(data.subjectID)
        // 自己的form表单等于data中的数据
        this.form = data
        // 如果为空的话转换不了东西就会报错 我们判断一下有没有值 有值就进行转换
        if (this.form.tags) {
          // 把收到的tags转为数组
          this.form.tags = data.tags.split(',')
        }
        // 做判断 把选项里控制按钮是否选中的值改为布尔值
        this.form.options.forEach(item => {
          if (item.isRight === 0) {
            item.isRight = false
          } else if (item.isRight === 1) {
            item.isRight = true
          }
        })
        // 控制按钮的显示隐藏 这是修改按钮
        this.control = false
        // 终止函数
        return
      }
      // 修改标题
      this.title = '试题录入'
      // 控制按钮的显示隐藏 这是添加按钮
      this.control = true
    },
    // 获取目录列表
    async getCatalogs (id) {
      // 获取简单目录列表数据 传入学科的id拿到对应的值
      const { data } = await simplesDirectorys({ subjectID: id })
      // 拿到对应的值
      this.catalogue = data
    },
    // 获取标签列表
    async getLabels (id) {
      // 获取简单标签列表数据 传入学科的id拿到对应的值
      const { data } = await simpleTags({ subjectID: id })
      // 拿到对应的值
      this.labels = data
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-form-item__label {
  width: 120px;
  font-weight: 700;
  text-align: right;
}
.el-select {
  margin-left: 4px;
}
::v-deep .el-form-item__content {
  margin-left: 120px;
}
::v-deep .ql-editor {
  height: 200px;
}
::v-deep .avatar-uploader {
  position: relative;
  margin-left: 4px;
  padding-top: 15px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  width: 100px;
  height: 62px;
  line-height: 62px;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
::v-deep .el-icon-circle-close {
  position: absolute;
  top: 15px;
  right: 0;
  font-size: 18px;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  background: #fff;
  font-size: 18px;
  font-weight: 400px;
  color: #999;
}
::v-deep .avatar {
  width: 100px;
  height: 60px;
  display: block;
}
.options {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  height: 80px;
}
::v-deep .el-upload-list__item {
  width: 100px;
  height: 60px;
  transition: 0s;
}
</style>
